<div local-class='form {{if @project.promptConfig "form--configured"}}'>
  <div local-class='provider'>
    {{inline-svg this.logoProvider local-class='logo'}}

    <AccSelect
      local-class='select'
      @searchEnabled={{false}}
      @selected={{this.providerValue}}
      @renderInPlace={{true}}
      @options={{this.mappedProviders}}
      @onchange={{fn this.setProvider}}
    />
    {{#if @project.promptConfig}}
      {{inline-svg 'assets/check.svg' local-class='check'}}
    {{/if}}
  </div>

  <div local-class='options'>
    <label local-class='option-checkbox'>
      <input value={{this.usePlatform}} type='checkbox' checked={{this.usePlatform}} {{on 'change' (fn this.onUsePlatformChange)}} />
      {{t 'components.project_settings.prompts.use_platform_label'}}
    </label>
  </div>

  {{#unless this.usePlatform}}
    <p local-class='config-key-help'>
      {{#if @project.promptConfig.useConfigKey}}
        {{t 'components.project_settings.prompts.config_key_help_present'}}
      {{else}}
        {{t 'components.project_settings.prompts.config_key_help_not_present'}}
      {{/if}}
    </p>

    <textarea placeholder={{this.configKeyPlaceholder}} local-class='textInput' {{on 'change' (fn this.onConfigKeyChange)}}>{{this.configKey}}</textarea>
  {{/unless}}

  <div local-class='actions'>
    {{#if @project.promptConfig}}
      <AsyncButton @onClick={{perform this.remove}} @loading={{this.isRemoving}} class='button button--red button--borderless'>
        {{t 'components.project_settings.integrations.delete'}}
      </AsyncButton>
    {{/if}}

    <AsyncButton @onClick={{perform this.submit}} @loading={{this.isSubmitting}} class='button button--filled'>
      {{t 'components.project_settings.integrations.save'}}
    </AsyncButton>
  </div>
</div>